<!doctype html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>二维码生成器</title>
        <link rel="stylesheet" href="spectre.min.css">
        <link rel="stylesheet" href="style.css">
        <script src="vue.min.js"></script>
        <script src="qrcanvas.js"></script>
        <style>
            * { margin: 0; padding: 0;}
            html,body,#app { width:100%;height:100%;background-color: #FFFFFF; }
            .top { width:100%;height: 10%;display: flex;align-items: center;justify-content: center;}
            .columns { width:100%;height: 90%; }
            .form-horizontal { width:35%; }
        </style>
    </head>
    <body>
        <div id="app" class="container" style="display:none" v-show="true">
            <div class="top" style="">
                <h2 class="d-inline-block">二维码生成器</h2>
            </div>
            <div class="columns">
                <div class="form-horizontal">
                    <div class="form-group">
                        <div class="column col-3">
                            <div class="form-label label-sm">内容:</div>
                        </div>
                        <div class="column">
                            <textarea class="form-input input-sm" v-model="settings.qrtext"></textarea>
                        </div>
                    </div>
                    <div class="form-group">
                        <div class="column col-3">
                            <div class="form-label label-sm">大小:</div>
                        </div>
                        <div class="column">
                            <input class="form-input input-sm" type="range" min="2" max="25" v-model="settings.cellSize">
                        </div>
                    </div>
                    <div class="form-group">
                        <div class="column col-3">
                            <div class="form-label label-sm">内边距:</div>
                        </div>
                        <div class="column">
                            <input class="form-input input-sm" type="range" min="0" max="16" v-model="settings.padding">
                        </div>
                    </div>
                    <div class="form-group">
                        <div class="column col-3">
                            <div class="form-label label-sm">容错率:</div>
                        </div>
                        <div class="column">
                            <input class="form-input input-sm" type="range" min="0" max="3" v-model="settings.correctLevel">
                        </div>
                    </div>
                    <div class="form-group">
                        <div class="column col-3">
                            <div class="form-label label-sm">效果:</div>
                        </div>
                        <div class="column">
                            <label class="form-radio input-sm" v-for="effect in effects">
                                <input type="radio" v-model="settings.effect" :value="effect.value">
                                <i class="form-icon"></i>
                                {{ effect.title }}
                            </label>
                            <div v-show="settings.effect">
                                <input class="form-input input-sm" type="range" min="0" max="100" step="5" v-model="settings.effectValue">
                                <div v-show="settings.effect === 'spot'">
                                    <img src="https://user-images.githubusercontent.com/3139113/38300650-ed2c25c4-382f-11e8-9792-d46987eb17d1.png" style="width: 100px;" ref="effect">
                                    <input class="form-input input-sm" type="file" @change="loadImage($event,'effect')">
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="form-group">
                        <div class="column col-3">
                            <div class="form-label label-sm">颜色:</div>
                        </div>
                        <div class="column">
                            <div class="text-right">
                                <button class="btn btn-link btn-sm mr-1" v-for="theme in themes" v-text="theme" @click.prevent="loadTheme(theme)"></button>
                            </div>
                            <div class="form-label label-sm">前景</div>
                            <input class="form-input input-sm" type="color" v-model="settings.colorFore">
                            <div class="form-label label-sm">背景</div>
                            <input class="form-input input-sm" type="color" v-model="settings.colorBack">
                            <div class="form-label label-sm">三个角外边界</div>
                            <input class="form-input input-sm" type="color" v-model="settings.colorOut">
                            <div class="form-label label-sm">三个角中心</div>
                            <input class="form-input input-sm" type="color" v-model="settings.colorIn">
                        </div>
                    </div>
                    <div class="form-group">
                        <div class="column col-4">
                            <label class="form-checkbox input-sm">
                                <input type="checkbox" v-model="settings.logo">
                                <i class="form-icon"></i>
                                添加Logo
                            </label>
                        </div>
                        <ul class="tab column" v-show="settings.logo">
                            <li class="tab-item" :class="{ active: settings.logoType === 'image' }">
                                <a href="#" @click.prevent="settings.logoType = 'image'">图片</a>
                            </li>
                            <li class="tab-item" :class="{ active: settings.logoType === 'text' }">
                                <a href="#" @click.prevent="settings.logoType = 'text'">文字</a>
                            </li>
                        </ul>
                    </div>
                    <div class="form-group" v-show="settings.logo">
                        <div class="column">
                            <div class="form-group" v-show="settings.logoType === 'image'">
                                <div class="column col-3">
                                    <label class="form-label label-sm">图片:</label>
                                </div>
                                <div class="column">
                                    <img src="logo.png" ref="logo" style="width: 100px;" @load="update">
                                    <input class="form-input input-sm" type="file" @change="loadImage($event,'logo')">
                                </div>
                            </div>
                            <div v-show="settings.logoType === 'text'">
                                <div class="form-group">
                                    <div class="column col-3">
                                        <label class="form-label label-sm">文字:</label>
                                    </div>
                                    <div class="column">
                                        <input class="form-input input-sm" v-model="settings.logoText">
                                    </div>
                                </div>
                                <div class="form-group">
                                    <div class="column col-3">
                                        <label class="form-label label-sm">字体:</label>
                                    </div>
                                    <div class="column">
                                        <input class="form-input input-sm" placeholder="CSS font string 如宋体" v-model="settings.logoFont">
                                    </div>
                                </div>
                                <div class="form-group">
                                    <div class="column col-3">
                                        <label class="form-label label-sm">颜色:</label>
                                    </div>
                                    <div class="column">
                                        <input class="form-input input-sm" type="color" v-model="settings.logoColor">
                                    </div>
                                </div>
                                <div class="form-group">
                                    <div class="column">
                                        <label class="form-checkbox input-sm">
                                            <input type="checkbox" v-model="settings.logoBold">
                                            <i class="form-icon"></i>
                                            加粗
                                        </label>
                                    </div>
                                    <div class="column">
                                        <label class="form-checkbox input-sm">
                                            <input type="checkbox" v-model="settings.logoItalic">
                                            <i class="form-icon"></i>
                                            斜体
                                        </label>
                                    </div>
                                </div>
                            </div>
                            <div class="form-group">
                                <div class="column col-3">
                                    <label class="form-label label-sm">Clear edges:</label>
                                </div>
                                <div class="column">
                                    <input class="form-input input-sm" type="range" min="0" max="3" v-model="settings.logoClearEdges">
                                </div>
                            </div>
                            <div class="form-group">
                                <div class="column col-3">
                                    <label class="form-label label-sm">Margin:</label>
                                </div>
                                <div class="column">
                                    <input class="form-input input-sm" type="range" min="0" max="10" v-model="settings.logoMargin">
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="column" style="display: flex; align-items: center; justify-content: center;    background-color: #FAFAFA;">
                    <qr-canvas :options="options"></qr-canvas>
                </div>
            </div>
        </div>
        <script src="index.js?2"></script>
    </body>
</html>